<template>
    <div >
    <div class="home-header">
    <div class="home-header-search mui-bar mui-bar-transparent" >
        <router-link class="mui-tab-item-llb" to="/list">
        <span class="mui-icon mui-icon-bars  span2"></span>
        </router-link>
      <div class="header-input">
          <span class="mui-icon mui-icon-search"></span>
          <input value="联想拯救者">
      </div>
        <span class="sapn1">登录</span>
    </div>


</div>
        <swipe :lunbotu=" lunbotu"></swipe>
        <div class="home-health">
            <ul class="health-grid">
                <li v-for="item in photo" >
                    <a href="#">
                        <img :src="item.img" >
                        <p>{{item.text}}</p>
                    </a>
                </li>

            </ul>
            <div class="scroll_news">
                <a href="">
                    <img src="//m.360buyimg.com/mobilecms/jfs/t14752/82/2574581467/6535/c8158ace/5aa8935bN94e31ff6.jpg.dpg" alt="">
                </a>
                <ul >
                    <li>
                        <a href="">最新</a>声波和超神波牙刷分不清，到底那个和那个
                    </li>
                </ul>
                <span><a href="">更多</a></span>

            </div>
            <div class="health-ft">
                <img src="//m.360buyimg.com/mobilecms/jfs/t1/33122/39/8907/171474/5cc7e206E5e0f6ef5/4896316ebbdfb038.gif" >
                <div class="small-swipe">
                    <mt-swipe :show-indicators="false">
                        <mt-swipe-item v-for="item in lunbotu">
                            <img :src="item.img" >
                        </mt-swipe-item>

                    </mt-swipe>
                </div>
            </div>
            <div class="show-img">
                <img src="//m.360buyimg.com/mobilecms/s376x240_jfs/t1/34428/28/5156/115947/5cc2d753E129beb34/5d4a5c2ac7e3dd34.png!q70.jpg.dpg" alt="">
                <img src="//m.360buyimg.com/mobilecms/s376x240_jfs/t1/32449/33/15631/174497/5cc2d86bE0289110c/9c53e25651659d43.png!q70.jpg.dpg" alt="">
            </div>


        </div>
        <div class="floor">
            <div class="floor-title">
                 <img src="//m.360buyimg.com/mobilecms/s750x80_jfs/t1/35491/32/3909/24646/5cc29b10Ef41f5d1c/7114cc48ed7edaa0.png!q70.jpg.dpg" alt="">
            </div>
            <div class="floor-head">
                <ul class="floor-hd">
                    <li>
                      <div class="head-lr">
                          <h3>科技生活</h3>
                          <p>居家清洁神器</p>
                      </div>
                        <div class="head-rl">
                            <img src="//m.360buyimg.com/mobilecms/s150x150_jfs/t4816/116/2129759578/127950/db70e46f/58f9b699N31fb0da8.jpg!q70.jpg.dpg" alt="">
                            <img src="//m.360buyimg.com/mobilecms/s150x150_jfs/t4816/116/2129759578/127950/db70e46f/58f9b699N31fb0da8.jpg!q70.jpg.dpg" alt="">
                        </div>

                    </li>
                    <li>
                        <div class="head-lr">
                            <h3>科技生活</h3>
                            <p>居家清洁神器</p>
                        </div>
                        <div class="head-rl">
                            <img src="//m.360buyimg.com/mobilecms/s150x150_jfs/t4816/116/2129759578/127950/db70e46f/58f9b699N31fb0da8.jpg!q70.jpg.dpg" alt="">
                            <img src="//m.360buyimg.com/mobilecms/s150x150_jfs/t4816/116/2129759578/127950/db70e46f/58f9b699N31fb0da8.jpg!q70.jpg.dpg" alt="">
                        </div>
                    </li>
                </ul>
                <div class="shopping-title">
                   <div>
                       <h3>十足泰味</h3>
                       <p>全民追美味</p>
                       <img src="//m.360buyimg.com/mobilecms/s150x150_jfs/t3109/127/2917311582/508582/6faede1/57e8d868N68ccc7ae.jpg!q70.jpg.dpg" alt="">
                   </div>
                    <div>
                        <h3>十足泰味</h3>
                        <p>全民追美味</p>
                        <img src="//m.360buyimg.com/mobilecms/s150x150_jfs/t3109/127/2917311582/508582/6faede1/57e8d868N68ccc7ae.jpg!q70.jpg.dpg" alt="">
                    </div>
                    <div>
                        <h3>十足泰味</h3>
                        <p>全民追美味</p>
                        <img src="//m.360buyimg.com/mobilecms/s150x150_jfs/t3109/127/2917311582/508582/6faede1/57e8d868N68ccc7ae.jpg!q70.jpg.dpg" alt="">
                    </div>
                    <div>
                        <h3>十足泰味</h3>
                        <p>全民追美味</p>
                        <img src="//m.360buyimg.com/mobilecms/s150x150_jfs/t3109/127/2917311582/508582/6faede1/57e8d868N68ccc7ae.jpg!q70.jpg.dpg" alt="">
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>


<script>
    import swipe from'../subcomponents/swipe.vue'
    import { Toast } from "mint-ui";

    export default{
        data(){
            return {
                lunbotu:[],
                photo:[]
            }
        },created() {
            this.getlunbotu()
                this.getphoto()
        },methods:{
            getlunbotu(){
                this.$http.get('/user.json').then(result=>{
                    console.log(result)
                    if(result.status===200){
                        this. lunbotu=result.body
                        console.log(this.lunbotu)

                    }else {
                        Toast("轮播图加载失败")
                    }

                })
            },
            getphoto(){
                this.$http.get('/user1.json').then(result=>{
                    if(result.status==200){
                        this.photo=result.body
                    }
                })
            }
        },components:{
            swipe
        }
    }
</script>

<style lang="scss" scoped>

.home-header{
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    color: #ffffff;
    .sapn1{
        margin: 6px 0 0 0;
        font-size: 15px;
    }


    .home-header-search{
        display: flex;
        justify-content: space-between;
        padding: 10px 15px 10px 15px;
        background-color: rgba(0,0,0,0);
        .span2{
            font-size: 20px;

        }
        .jd-icon-jd{
            width: 20px;
            height: 20px;
        }
        .header-input{
            width: 273px;
            height: 30px;
            border: 1px solid #ffffff;
            border-radius: 14px;
            background-color: #fff;
            color: #929292;
            position: relative;
            span{
                margin-left: 25px;
                font-size: 20px;
            }
            input{
              position: absolute;
                top: 3px;
                left: 50px;
                width: 195px;
                height: 25px;
                border: none;
                margin-left: 5px;
                font-size: 12px;

            }
        }
    }
}
    .home-health{
        position: relative;
        top: -0.625rem;
        border-radius:10px 10px 0 0;
        overflow: hidden;
        background-color: #fff;
        .scroll_news{
            display: flex;
            padding: 0.3125rem;
            font-size: .6rem;

            a{
                height: 0;
                color: red;
                margin: 2px;
                img{
                    width: 72px;
                    height: 1.2rem;
                }
            }
            span{
               a{
                   border-left: 1px solid #929292;
                   height: 16px;
                   color: #000000;
                   padding-left:5px;
               }
            }
            ul{
                padding: 0;
                margin: 0;
                list-style: none;
                overflow: hidden;
                li{
                    line-height: 22px;
                    width: 15.625rem;
                    overflow:hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;
                    a{
                        margin-right: 5px;
                    }
                }
            }
        }

        .health-grid{
            display: flex;
            flex-wrap: wrap;
            box-sizing: border-box;
            padding: 0;
            margin: 10px 0 0 0;

            li{
                list-style: none;
                width: 20%;
                display: flex;
                justify-content: center;
                align-items:center;
                a{
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                }
                img{
                    width: 40px;
                    height: 40px;
                    margin-bottom: 5px;

                }

            }
        }
        .health-ft{
            padding: 6px;
            background-color: 	#F5F5F5;
            position: relative;
            img{
                width: 100%;
                height: 108px;
            }
            .small-swipe{
                position: absolute;
                top: 1.5625rem;
                left: 2.875rem;
                width: 4.125rem;
                height: 4.125rem;
                img{
                    height: 66px;
                }

            }

        }
          .show-img{
              background-color:#f5f5f5;
              display: flex;
              justify-content: center;



            img{
                width: 48%;
                height: 120px;
                margin-right: 1px;

            }
        }
    }
    .floor{
        .floor-title{
            display: flex;
            justify-content: center;
            img {
                height: 34px;
            }
        }
            .floor-head{
                .floor-hd {
                    list-style: none;
                    background-color: #fff;
                   margin: 0px 8px 0px 8px;
                    border-top-left-radius: 7px;
                    border-top-right-radius: 7px;
                    padding: 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-wrap: wrap;
                    li{
                        width: 195px;
                        border-bottom: 1px solid #cccccc;
                        border-right: 1px solid #cccccc;

                    }
                    .head-lr{
                        h3{
                           margin: 0;
                            padding: 0;
                            font-size: 17.664px;
                            color: #45CAFF;
                            font-weight: 700;
                        }

                    }
                    .head-rl{
                        padding: 0 15px;
                        img{
                            width: 66px;
                            height: 66px;
                        }
                    }
                }
                .shopping-title{
                    background-color: #fff;
                    margin: 0px 8px;
                    div{
                    width: 95px;
                    height: 132px;
                        display: inline-block;

                    h3{
                        font-size: 17px;
                        margin: 0;
                    }
                img{
                    width: 71px;
                    height: 71px;
                }
                    }
                }
            }

    }

</style>